<template>
	<view class="page participant">
		<view class="padding-left30 font-size28 color-white margin-top30 f12">
			<text style="color: #fff050;" class="padding10 mc-bold">{{_luckyCodeList.length-1}}</text> 位朋友助力，您额外获得 <text style="color: #fff050;" class="padding10 mc-bold">{{_luckyCodeList.length-1}}</text> 个幸运码
		</view>
		<view class="padding30">
			<block v-for="(item,index) in _luckyCodeList" :key="index">
				<view class="margin-bottom20 padding30 border-radius10 color-white mc-flex-vcenter" style="background-color: #2f2c83;">
					<image :src="item.photo" mode="aspectFill" class="avatar"></image>
					<view class="margin-left20 mc-flex-auto">
						<view class="font-size28 mc-bold">{{item.nickName}}</view>
						<view class="font-size20 margin-top20" style="opacity: 0.6;">{{item.createTime}} {{index==0?'成功参与':'成功邀请'}}</view>
					</view>
					<view class="font-size20 margin-left20">
						<view class="text-right" style="opacity: 0.6;">您获得幸运码</view>
						<view class="margin-top20 text-right" style="color: #fff050;">{{item.drawCode}}</view>
					</view>
				</view>
			</block>
		</view>
		<view>
			<banner-ad></banner-ad>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	let gData = {};
	let _self;
	export default {
		components: {},
		data() {
			return {}
		},
		onLoad(options) {
			_self = this;
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		// 下拉刷新
		onPullDownRefresh() {},
		// 上拉加载
		onReachBottom() {},
		computed:{
			...mapGetters('draw', ['_luckyCodeList']),
		},
		methods: {},
	}
</script>

<style lang="scss" scoped>
	.participant {
		background-color: #581ae1;
		color: #555555;
		font-size: 32rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
		}
	}
</style>
